<template>
  <div class="sys-wrap">
    <div class="msg-box">
      <div class="msg-title">
        <div class="title msg1" @click="toPage">系统通知</div>
        <div class="title msg2">其他消息</div>
      </div>
      <div class="manage" @click="manage">{{title}}</div>
    </div>

    <!--消息列表-->
    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      class="sys-van"
    >
      <div class="sys-box" :class="{'distance':showManage}">
        <div class="sys-con" v-for="(item,index) in infoList" :key="index">
          <div class="mui-input-row mui-checkbox select" v-if="single" @click="singleCheck">
            <input name="checkbox" type="checkbox" :value="item.id">
          </div>

          <div class="list-box" :class="{'box':single}" @click="queryMsgDetail(item.id)">
            <div class="icon-box">
              <img :src="item.status == 0?require('./msg1.png'):require('./msg2.png')" class="icon"/>
            </div>
            <div class="content-box">
              <span class="title">{{item.informationTitle}}</span>
              <span class="content">{{item.informationDetails}}</span>
            </div>
            <div class="time-box">{{item.time | format}}</div>
          </div>
        </div>

        <div class="empty-wrap" v-if="infoList.length == 0 && !loading">
          <div class="empty-box">
            <div class="img-box"><img src="./empty.png" class="empty"/></div>
            <div class="tip">暂无新的消息~</div>
          </div>
        </div>

      </div>
    </van-list>

    <div class="btn-box" v-show="showManage">
      <div class="title1" @click="checkFull">
        <div class="mui-input-row mui-checkbox select">
          <input name="checkbox" type="checkbox" ref="all">
        </div>
        全选
      </div>
      <div class="title2" @click="delMsg">删除</div>
    </div>

  </div>
</template>

<script>
  import {baseUrl} from "../../common/js/env"
  import {formatDate} from "../../common/js/util"

  export default {
    inject: ['reload'],
    data() {
      return {
        showSelect: false,
        flag: true,
        showManage: false,
        mark: true,
        title: "管理",
        userSign: "",
        currentPage: 1,
        PageSize: 20,
        infoList: [],
        loading: false,
        finished: false,
        single: false,
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("user_sign"));
    },
    methods: {
      onLoad() {
        // 异步更新数据
        setTimeout(() => {
          this.queryMsgList();
        }, 500);
      },
      queryMsgList() {//查询消息列表
        this.axios.get(baseUrl + "/info/query_infolist?sgin=" + this.userSign + "&page=" + this.currentPage + "&size=" + this.PageSize).then((res) => {
          let infoObj = res.data;
          if (infoObj.code == 0) {
            if (infoObj.data != null && infoObj.data.length > 0) {
              let array = new Array();
              for (let i = 0; i < infoObj.data.length; i++) {
                if (infoObj.data[i].type == 2) {
                  array.push(infoObj.data[i]);
                }
              }

              if (array.length > 0) {
                this.infoList = this.infoList.concat(array);
                this.selectAll("checkbox", false);
                this.$refs.all.checked = false;
              } else {
                this.showManage = false;
                this.title = "管理";
              }

              //加载状态结束
              this.loading = false;
              this.currentPage++;
            } else {
              this.showManage = false;
              this.title = "管理";

              this.loading = false;
              if (this.infoList.length >= infoObj.data.length) {
                this.finished = true;
              }
            }
          } else {
            this.$vux.toast.text(infoObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      queryMsgDetail(id) {//消息详情
        this.$router.push({path: "/infodetail", query: {id: id}});
      },
      checkFull() {//全选
        if (this.flag) {
          this.selectAll('checkbox', true);
          this.flag = false;
        } else {
          this.selectAll('checkbox', false);
          this.flag = true;
        }
      },
      singleCheck() {//单选
        let allBox = document.getElementsByName('checkbox');
        let checkBox = this.getCheckBoxRes('checkbox');
        if (checkBox.length == allBox.length) {
          this.$refs.all.checked = true;
        } else {
          this.$refs.all.checked = false;
        }
      },
      manage() {//管理
        if (this.mark) {
          this.showSelect = true;
          this.showManage = true;
          this.mark = false;
          this.title = "取消";
          this.single = true;
          this.$refs.all.checked = false;
        } else {
          this.showSelect = false;
          this.showManage = false;
          this.mark = true;
          this.title = "管理";
          this.single = false;
        }
      },
      delMsg() {
        let checkList = this.getCheckBoxRes('checkbox');
        if (checkList.length < 1) {
          this.$vux.toast.text("请选择要删除的消息", "middle");
          return;
        }
        this.$vux.loading.show({
          text: '加载中',
        });
        this.axios.get(baseUrl + "/info/del_infos?sgin=" + this.userSign + "&infoId=" + checkList).then((res) => {
          let infoObj = res.data;
          this.$vux.loading.hide();
          if (infoObj.code == 0 && infoObj.data != 0) {
            this.reload();
          } else {
            this.$vux.toast.text(infoObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      getCheckBoxRes(className) {//选择checkbox
        let rdsObj = document.getElementsByName(className);
        let checkVal = new Array();
        let k = 0;
        for (let i = 0; i < rdsObj.length; i++) {
          if (rdsObj[i].checked) {
            if (rdsObj[i].value != "on") {
              checkVal[k] = parseInt(rdsObj[i].value);
            }
            k++;
          }
        }
        return checkVal;
      },
      selectAll(className, flag) {//全选/全不选
        let loves = document.getElementsByName(className);
        for (let i = 0; i < loves.length; i++) {
          loves[i].checked = flag;
        }
      },
      toPage() {
        this.$router.push({path: "/system", query: {}})
      },
    },
    filters: {
      format(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd');
      },
    },
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"
  @import "../../../static/css/mui.min.css"

  .sys-wrap
    wh(100%, auto)
    .msg-box
      fj(center, center)
      position: fixed
      top: 0
      z-index: 99
      wh(100%, 1.147rem)
      border-top: 0.013rem solid rgba(238, 238, 238, 1)
      border-bottom: 0.013rem solid rgba(238, 238, 238, 1)
      background: #FFF
      .msg-title
        display: flex
        wh(5.813rem, 0.92rem)
        .title
          fj(center, center)
          flex: 1
        .msg1
          size-color(0.387rem, rgba(27, 27, 27, 1))
          background: rgba(255, 255, 255, 1)
          border: 0.013rem solid rgba(60, 175, 255, 1)
          border-bottom-left-radius: 0.453rem
          border-top-left-radius: 0.453rem
        .msg2
          size-color(0.387rem, rgba(255, 255, 255, 1))
          background: rgba(60, 175, 255, 1);
          border: 0.013rem solid rgba(60, 175, 255, 1);
          border-bottom-right-radius: 0.453rem
          border-top-right-radius: 0.453rem
      .manage
        position: absolute
        right: 0.373rem
        size-color(0.387rem, rgba(27, 27, 27, 1))
    .sys-van
      position: absolute
      top: 1.147rem
      wh(100%, auto)
      .sys-box
        wh(100%, auto)
        .sys-con
          display: flex
          align-items: center
          margin-left: 3.6%
          wh(96.4%, 1.707rem)
          border-bottom: 0.013rem solid rgba(170, 170, 170, 0.15)
          .list-box
            display: flex
            align-items: center
            wh(96.4%, 1.707rem)
            .icon-box
              margin-right: 0.24rem
              wh(1.013rem, 1.013rem)
              .icon
                wh(100%, 100%)
            .time-box
              margin-left: auto
              margin-right: 0.373rem
              size-color(0.293rem, rgba(102, 102, 102, 1))
            .content-box
              display: flex
              flex-direction: column
              width: 58%
              .title
                ellipsis()
                size-color(0.44rem, rgba(29, 29, 29, 1))
                padding-bottom: 0.12rem
              .content
                ellipsis()
                size-color(0.387rem, rgba(102, 102, 102, 1))
                padding-top: 0.12rem

          .box
            wh(92.4%, 1.707rem)
          .select
            display: flex
            align-items: center
            margin-right: 0.2rem
            wh(0.507rem, 0.507rem)
        .empty-wrap
          fj(center, center)
          width: 100%
          height: auto
          position: fixed
          top: 0
          left: 0
          right: 0
          bottom: 0
          z-index: -1
          .empty-box
            width: 4.773rem
            height: auto
            .img-box
              width: 100%
              height: 4.773rem
              .empty
                width: 100%
                height: 100%
            .tip
              display: flex
              justify-content: center
              margin-top: 0.387rem
              font-size: 0.373rem
              color: rgba(68, 68, 68, 1)
      .distance
        bottom: 1.333rem
    .btn-box
      display: flex
      position: fixed
      bottom: 0
      wh(100%, 1.333rem)
      .title1
        fj(flex-start, center)
        flex: 1
        size-color(0.44rem, rgba(60, 175, 255, 1))
        background: rgba(255, 255, 255, 1)
        border-top: 0.013rem solid rgba(238, 238, 238, 0.5)
        .select
          display: flex
          align-items: center
          margin-left: 0.373rem
          margin-right: 0.75rem
          wh(0.507rem, 0.507rem)
      .title2
        fj(center, center)
        flex: 1
        size-color(0.44rem, rgba(255, 255, 255, 1))
        background: rgba(255, 83, 83, 1)
</style>
